<template>
	<view>
		<uni-popup ref="popup" type="bottom" :safe-area="true" @change="handleChange" background-color="#fff">
			<view class="selector-content">
				<view class="header">
					<text class="title">选择球队</text>
					<text class="close" @tap="close">×</text>
				</view>
				<scroll-view class="team-list" scroll-y>
					<view class="team-item" 
						  v-for="team in teams" 
						  :key="team.id"
						  :class="{'selected': isSelected(team)}"
						  @tap="selectTeam(team)">
						<view class="team-info">
							<image class="team-avatar" 
								   :src="team.logo || '/static/avatars/default-avatar.jpg'" 
								   mode="aspectFill" />
							<text class="team-name">{{team.name}}</text>
						</view>
						<text class="check-icon" v-if="isSelected(team)">✓</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.selector-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		min-height: 200rpx;
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
		margin: 0;
		padding: 0;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			background: #fff;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.close {
				font-size: 40rpx;
				color: #999;
				padding: 0 20rpx;
			}
		}
		
		.team-list {
			max-height: 70vh;
			background: #fff;
			padding-bottom: env(safe-area-inset-bottom);
			
			.team-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				background: #fff;
				
				&:last-child {
					border-bottom: none;
					margin-bottom: env(safe-area-inset-bottom);
				}
				
				&.selected {
					background: #f8f8f8;
					
					.team-name {
						color: #ff6b35;
					}
					
					.check-icon {
						color: #ff6b35;
					}
				}
				
				.team-info {
					display: flex;
					align-items: center;
					flex: 1;
					
					.team-avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					
					.team-name {
						font-size: 28rpx;
						color: #333;
					}
				}
				
				.check-icon {
					font-size: 40rpx;
					color: #999;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	:deep(.uni-popup) {
		background-color: #fff !important;
	}
	
	:deep(.uni-popup__wrapper) {
		background-color: #fff !important;
	}
	
	:deep(.uni-popup__wrapper-bottom) {
		background-color: #fff !important;
	}
	
	:deep(.uni-popup__mask) {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
	
	:deep(.uni-popup-bottom) {
		background-color: #fff !important;
	}
</style>

<script>
	export default {
		name: 'TeamSelector',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			teams: {
				type: Array,
				default: () => []
			},
			value: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				isOpened: false
			}
		},
		watch: {
			show: {
				handler(val) {
					if (val && !this.isOpened) {
						this.$nextTick(() => {
							if (this.$refs.popup) {
								this.$refs.popup.open('bottom')
							}
						})
					} else if (!val && this.isOpened) {
						if (this.$refs.popup) {
							this.$refs.popup.close()
						}
					}
				}
			}
		},
		methods: {
			handleChange(e) {
				this.isOpened = e.show
				if (!e.show) {
					this.$emit('update:show', false)
				}
			},
			isSelected(team) {
				return this.value && team.id === this.value.id
			},
			selectTeam(team) {
				this.$emit('select', team)
				this.$emit('update:show', false)
				if (this.$refs.popup) {
					this.$refs.popup.close()
				}
			},
			close() {
				this.$emit('update:show', false)
				if (this.$refs.popup) {
					this.$refs.popup.close()
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				if (this.show && this.$refs.popup) {
					this.$refs.popup.open('bottom')
				}
			})
		}
	}
</script>